<template>
  <div class="views">
    <el-row :gutter='20'>
        <el-col :span="8"><personInfo></personInfo></el-col>
        <el-col :span="8"><antigen></antigen></el-col>
        <el-col :span="8"><healthData></healthData></el-col>
      </el-row>
       <el-row :gutter='20'>
        <el-col :span="8"><surveyData></surveyData></el-col>
        <el-col :span="8"><highRisk></highRisk></el-col>
        <el-col :span="8"><visitorData></visitorData></el-col>
      </el-row>
  </div>
</template>

<script>
const modulesFiles = require.context('./modules', true, /index.vue$/)
let res_ = {}
modulesFiles.keys().forEach(item => {
  let comp = modulesFiles(item)
  let compName = item.substr(0, item.lastIndexOf('/'))
  compName = compName.substring(compName.lastIndexOf('/') + 1, compName.length)
  res_[compName] = comp.default
})
export default {
  components: { ...res_ }
}
</script>

<style lang='scss' scoped>
.views {
    height: calc(100vh - 145px);
    padding-top: 20px;
    & > .el-row {
      height: calc((100% - 20px) / 2);
      margin-bottom: 20px;
      .el-col {
        height: 100%;
        & > div {
          background-color: #fff;
          padding: 20px;
          box-shadow: 0 2px 12px 0  #ccc;
          border-radius: 6px;
        }
      }
    }
    & > .el-row:last-child {
      margin-bottom: 0;
    }
  }
</style>
